<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:o="http://omnifaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
        >
<ui:composition template="/templates/fullLayout.xhtml">
    <ui:define name="content">
        <h:form id="form">
            <p:dataTable id="dataTable" var="item" value="#{ipController.lazyModel}" styleClass="dataTableStyle"
                         paginator="true" rows="10" selection="#{ipController.selectedItems}"
                         emptyMessage="#{msg.noRecordsFound}"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         lazy="true" rowsPerPageTemplate="10,25,50">
                <f:facet name="header">
                    Lista de IP
                </f:facet>
                <p:column style="width:18px">
                    <p:commandButton icon="ui-icon-pencil" update=":itemDetailForm:display"
                                     title="Ver o modificar"
                                     oncomplete="PF('itemDialog').show()">
                        <f:setPropertyActionListener value="#{item}" target="#{ipController.selectedItem}"/>
                    </p:commandButton>
                </p:column>

                <p:column selectionMode="multiple" style="width:18px"/>
                <p:column sortBy="#{item.ip}" filterBy="#{item.ip}">
                    <f:facet name="header">
                        <h:outputText value="Dirección IP"/>
                    </f:facet>
                    <p:commandLink value="#{item.ip}" update=":itemDetailForm:display"
                                   oncomplete="PF('itemDialog').show()" title="Ver">
                        <f:setPropertyActionListener value="#{item}" target="#{ipController.selectedItem}"/>
                    </p:commandLink>
                </p:column>

                <p:column sortBy="#{item.ocupada}" filterBy="#{item.ocupada}"
                          filterOptions="#{ipController.siNoListOptions}"
                          filterMatchMode="exact">
                    <f:facet name="header">
                        <h:outputText value="Ocupada"/>
                    </f:facet>
                    <h:outputText value="#{msg[item.ocupada]}"/>
                </p:column>
                <p:column sortBy="#{item.rnc.nombre}" filterBy="#{item.rnc.nombre}"
                          filterOptions="#{ipController.rncListOptions}"
                          filterMatchMode="exact">
                    <f:facet name="header">
                        <h:outputText value="RNC"/>
                    </f:facet>
                    <h:outputText value="#{item.rnc.nombre}"/>
                </p:column>

                <f:facet name="footer">
                    <p:commandButton value="Nueva IP" oncomplete="PF('newItemDialog').show()" icon="ui-icon-star"
                                     title="Crear nueva IP" rendered="#{authorizationChecker.admin}"/>
                    <p:commandButton value="Modificar IP" actionListener="#{ipController.doUpdate}"
                                     update=":itemDetailForm:display"
                                     icon="ui-icon-pencil"
                                     title="Modificar IP"
                                     oncomplete="if (!args.validationFailed) {PF('itemDialog').show()}"
                                     rendered="#{authorizationChecker.admin}">
                    </p:commandButton>
                    <p:commandButton value="Ver IP" actionListener="#{ipController.doUpdate}"
                                     update=":itemDetailForm:display"
                                     icon="ui-icon-pencil"
                                     title="Ver IP" oncomplete="if (!args.validationFailed) {PF('itemDialog').show()}"
                                     rendered="#{not authorizationChecker.admin}">
                    </p:commandButton>
                    <p:commandButton value="Eliminar IP" actionListener="#{ipController.doDelete}"
                                     update="dataTable" icon="ui-icon-trash" rendered="#{authorizationChecker.admin}">
                        <p:confirm header="Confirmación" message="#{msg.askConfirmAction}"
                                   icon="ui-icon-alert"/>
                    </p:commandButton>
                </f:facet>
            </p:dataTable>
        </h:form>

        <p:dialog header="Detalle de IP" widgetVar="itemDialog" resizable="false" id="itemDlg">
            <h:form id="itemDetailForm">
                <p:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
                    <h:outputText value="IP:"/>
                    <h:inputText value="#{ipController.selectedItem.ip}" required="true"
                                 readonly="#{not authorizationChecker.admin}">
                        <f:validator validatorId="ipValidator"/>
                    </h:inputText>
                    <p:outputLabel value="Ocupada"/>
                    <p:selectOneRadio value="#{ipController.selectedItem.ocupada}"
                                      disabled="#{not authorizationChecker.admin}">
                        <f:selectItem itemValue="#{true}" itemLabel="Sí"/>
                        <f:selectItem itemValue="#{false}" itemLabel="No"/>
                    </p:selectOneRadio>
                    <p:outputLabel value="RNC:" for="detailIpRnc"/>
                    <p:selectOneMenu id="detailIpRnc" value="#{ipController.selectedItem.rnc}" required="true"
                                     requiredMessage="Por favor ingresar RNC"
                                     disabled="#{not authorizationChecker.admin}">
                        <o:converter converterId="entityListConverter" list="#{ipController.rncList}"/>
                        <f:selectItem itemLabel="Seleccionar RNC..." noSelectionOption="true"/>
                        <f:selectItems value="#{ipController.rncList}" var="rnc"
                                       itemLabel="#{rnc.nombre}" itemValue="#{rnc}"/>
                    </p:selectOneMenu>

                    <f:facet name="footer">
                        <p:commandButton value="Actualizar" update=":form:dataTable, :growl"
                                         oncomplete="handleSubmitRequest(xhr, status, args, 'itemDlg','itemDetailForm'); "
                                         action="#{ipController.doConfirmUpdate}"
                                         rendered="#{authorizationChecker.admin}"/>
                        <p:commandButton value="Cancelar" onclick="itemDialog.hide()"
                                         immediate="true" rendered="#{authorizationChecker.admin}"/>
                        <p:commandButton value="Aceptar" onclick="itemDialog.hide()"
                                         immediate="true" rendered="#{not authorizationChecker.admin}"/>
                    </f:facet>
                </p:panelGrid>
            </h:form>
        </p:dialog>

        <p:dialog header="Crear nueva IP" widgetVar="newItemDialog" resizable="false" id="newItemDlg">
            <h:form id="newItemForm">
                <p:panelGrid id="displayNewIp" columns="2" cellpadding="4" style="margin:0 auto;">
                    <h:outputText value="IP:"/>
                    <p:inputText value="#{ipController.newItem.ip}" required="true"
                                 requiredMessage="Por favor ingresar dirección IP">
                        <f:validator validatorId="ipValidator"/>
                    </p:inputText>

                    <p:outputLabel value="Ocupada"/>
                    <p:selectOneRadio value="#{ipController.newItem.ocupada}">
                        <f:selectItem itemValue="#{true}" itemLabel="Sí"/>
                        <f:selectItem itemValue="#{false}" itemLabel="No"/>
                    </p:selectOneRadio>
                    <p:outputLabel for="newIpRnc" value="RNC:"/>
                    <p:selectOneMenu id="newIpRnc" value="#{ipController.newItem.rnc}" required="true"
                                     requiredMessage="Por favor ingresar RNC">
                        <o:converter converterId="entityListConverter" list="#{ipController.rncList}"/>
                        <f:selectItem itemLabel="Seleccionar RNC..." noSelectionOption="true"/>
                        <f:selectItems value="#{ipController.rncList}" var="rnc"
                                       itemLabel="#{rnc.nombre}" itemValue="#{rnc}"/>
                    </p:selectOneMenu>
                    <f:facet name="footer">
                        <p:commandButton value="Confirmar" update=":form:dataTable, :growl"
                                         oncomplete="handleSubmitRequest(xhr, status, args, 'newItemDlg','newItemForm');"
                                         actionListener="#{ipController.doCreate}"/>
                        <p:commandButton value="Cancelar" onclick="newItemDlg.hide()"
                                         immediate="true"/>
                    </f:facet>
                </p:panelGrid>
            </h:form>
        </p:dialog>

        <p:growl id="growl" showDetail="false" life="5000" autoUpdate="true"/>

        <p:confirmDialog global="true">
            <p:commandButton value="Sí" type="button" styleClass="ui-confirmdialog-yes"
                             icon="ui-icon-check"/>
            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no"
                             icon="ui-icon-close"/>
        </p:confirmDialog>

        <script type="text/javascript">
            function handleSubmitRequest(xhr, status, args, dialogName, formName) {
                dialog = jQuery('#' + dialogName);
                if (args.validationFailed) {
                    dialog.effect("shake", { times: 3 }, 100);
                } else {
                    clearForm(formName);
                    PF('newItemDialog').hide();
                    PF('itemDialog').hide();
                }
            }
            function clearForm(formName) {
                jQuery('#' + formName).each(function () {
                    this.reset();
                });
            }
        </script>
    </ui:define>
</ui:composition>
</html>